<template>
	<div class="form-base">
		<el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
			<el-row :gutter="20">
				<el-col :xs="24" :md="12">
					<el-form-item label="名称" prop="name">
						<el-input v-model="formData.name" placeholder="请输入活动名称" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="数量" prop="amount">
						<el-input v-model.number="formData.amount" placeholder="请输入数量" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :xs="24" :md="12">
					<el-form-item label="区域" prop="region">
						<el-select v-model="formData.region" placeholder="请选择活动区域" clearable>
							<el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="开始时间" prop="startTime">
						<el-date-picker v-model="formData.startTime" type="datetime" placeholder="请选择开始时间"></el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>

			<el-row :gutter="20">
				<el-col :xs="24" :md="12">
					<el-form-item label="手机" prop="mobilePhone">
						<el-input v-model="formData.mobilePhone" placeholder="请输入主办方联系电话" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :xs="24" :md="12">
					<el-form-item label="邮箱" prop="email">
						<el-input v-model="formData.email" placeholder="请输入主办方联系邮箱" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>

			<el-form-item class="inherit-line-height" label="即时配送" prop="delivery">
				<el-switch v-model="formData.delivery"></el-switch>
			</el-form-item>

			<el-form-item class="inherit-line-height" label="类型" prop="type">
				<el-checkbox-group v-model="formData.type">
					<el-checkbox label="1">美食线上活动</el-checkbox>
					<el-checkbox label="2">地推活动</el-checkbox>
					<el-checkbox label="3">线下主题活动</el-checkbox>
					<el-checkbox label="4">单纯品牌曝光</el-checkbox>
				</el-checkbox-group>
			</el-form-item>

			<el-form-item class="inherit-line-height" label="特殊资源" prop="resource">
				<el-radio-group v-model="formData.resource">
					<el-radio label="1">线上品牌商赞助</el-radio>
					<el-radio label="2">线下场地免费</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item label="描述" prop="description">
				<el-input
					v-model="formData.description"
					type="textarea"
					:rows="3"
					:maxlength="100"
					show-word-limit
					placeholder="请输入描述"
				></el-input>
			</el-form-item>
		</el-form>

		<div style="text-align: center">
			<el-button type="primary" @click="handleSubmit" :loading="submitLoading">提交</el-button>
			<el-button type="info" @click="handleCancel">取消</el-button>
		</div>
	</div>
</template>

<script>
import tableMng from '@/utils/tableMng'

export default {
	name: 'BaseForm',
	data() {
		return {
			formData: {
				name: '',
				amount: '',
				region: '',
				startTime: '',
				mobilePhone: '',
				email: '',
				delivery: false,
				type: [],
				resource: '',
				description: '',
			},
			formRules: {
				name: [
					{
						required: true,
						message: '请填写名称',
						trigger: 'blur',
					},
					{
						max: 20,
						message: '名称不能超过20个字',
						trigger: 'blur',
					},
				],
				amount: [
					{
						type: 'number',
						message: '数量必须为数值',
					},
				],
				region: [
					{
						required: true,
						message: '请选择区域',
						trigger: 'change',
					},
				],
				startTime: [
					{
						required: true,
						message: '请选择时间',
						trigger: 'change',
					},
				],
				mobilePhone: [
					{
						required: true,
						message: '请填写手机号',
						trigger: 'blur',
					},
					{
						pattern: /^1[345789]\d{9}$/,
						message: '手机号码格式不正确',
						trigger: 'blur',
					},
				],
				email: [
					{
						required: true,
						message: '请填写邮箱',
						trigger: 'blur',
					},
					{
						type: 'email',
						message: '邮箱格式不正确',
						trigger: 'blur',
					},
				],
				type: [
					{
						required: true,
						message: '请选择类型',
						trigger: 'change',
					},
				],
			},
			regionList: [],
			submitLoading: false,
		}
	},
	created() {
		this.regionList = tableMng.getTable('region')
	},
	methods: {
		handleSubmit() {
			this.submitLoading = true
			this.$refs.form.validate(valid => {
				if (valid) {
					console.log(this.formData)
					this.$message.success('提交成功！')
				} else {
					this.$message.error('请按正确格式填写信息！')
				}
			})
			this.submitLoading = false
		},
		handleCancel() {
			this.$refs.form.resetFields()
		},
	},
}
</script>

<style lang="scss" scoped>
.form-base {
	width: 70%;
	min-width: 500px;
	padding: 1em;
	margin: 0 auto;
	border-radius: 10px;
	background-color: #fff;
}
</style>

<style lang="scss">
.form-base {
	.inherit-line-height {
		.el-form-item__label,
		.el-form-item__content {
			line-height: inherit;
		}
	}
}
</style>
